<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>工艺流程监控</title>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link th:href="@{favicon.ico}" rel="shortcut icon"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/jquery.contextMenu.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/skins.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css?v=4.7.2}" rel="stylesheet"/>
    <th:block th:include="include :: header('工艺流程监控')" />
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .area{
            height: 750px;
            width: calc(100% - 80px);
            margin: 20px 40px 0px 40px ;
            display: inline-block;
            background-color: white;
        }
        .areaborder{
            border-radius: 3px;
            border: solid 1px #e7eaec;
            padding: 20px;
            height: 100%;
        }
        .areahead1{
            height: 35px;
            width: 100%;
        }
        .areahead2{
            height: 46px;
            width: 100%;
        }
        .areaworkborder{
            margin-top: 20px;
            border-radius: 3px;
            border: solid 1px #e7eaec;
        }
        .areawork{
            margin-top: 100px;
            margin-left: 100px;
            height: 500px;
            width: 100%;
            position: relative;
        }
        .boxborder{
            position: absolute;
            border-radius: 2px;
            border: solid 1px #000000;
            border-bottom: 0px;
        }
        .boxborder0{
            width: 50%;
            height: 30px;
            top: -30px;
            left: 0px;
            border-top: 0px;
            border-left: 0px;
        }
        .boxborder1{
            width: 50%;
            height: 100px;
            top: 0px;
            left: 25%;
        }
        .boxborder2{
            width:25%;
            height: 200px;
            top: 100px;
            left: 12.5%;
        }
        .boxborder3{
            width: 25%;
            height: 200px;
            top: 100px;
            left: 62.5%;
        }
        .boxborder4{
            width: 25%;
            height: 100px;
            top: 200px;
            left: 0px;
        }
        .boxborder5{
            width: 25%;
            height: 100px;
            top: 200px;
            left: 50%;
        }
        .processbtn{
            width: 120px;
            height:60px;
            position: absolute;
            z-index: 1;
        }
        .textbtn:hover{
            color: black;
            cursor: pointer;
        }
        .textbtn:active{
            color: gray;
        }
    </style>
</head>
<body class="gray-bg">
    <div class="area">
        <div class="areaborder">

            <div class="areahead1">
                <div style="user-select: none;width: 100px;height: 100%;float: left;font-size: 14px;" class="textbtn">工艺流程选择</div>
                <div style="user-select: none;width: 100px;height: 100%;float: right;font-size: 14px;" onclick="Goto_systemhomepage()" class="textbtn">返回首页</div>
                <div style="user-select: none;width: 100px;height: 100%;float: right;font-size: 14px;" onclick="Goto_mainconsole()" class="textbtn">返回总控台</div>
            </div>
            <div class="areahead2">
                <div style="margin-right:20px;width: 100px;height:100%;font-size:18px;line-height:46px;text-align:center;float: left;">批次号</div>
                <div style="margin-right:20px;float: left;"><button style="width: 200px;" type="button" class="btn btn-lg btn-outline btn-default">请选择</button></div>
                <div style="margin-left:20px;float: right;"><button style="width: 130px;" type="button" class="btn btn-lg btn-outline btn-default">搜索</button></div>
                <div style="margin-left:20px;float: right;"><button style="width: 130px;" type="button" class="btn btn-lg btn-outline btn-default">重置</button></div>
            </div>
            <div class="areaworkborder">
                <div class="areawork">
                    <div class="boxborder boxborder0"></div>
                    <div class="boxborder boxborder1"></div>
                    <div class="boxborder boxborder2"></div>
                    <div class="boxborder boxborder3"></div>
                    <div class="boxborder boxborder4"></div>
                    <div class="boxborder boxborder5"></div>
                    <button style="top: calc(0px - 30px - 50px);left:calc(50% - 60px);" type="button" class="processbtn btn btn-w-m btn-default">反推整体</button>
                    <button style="top: calc(100px - 30px - 50px);left:calc(25% - 60px);" type="button" class="processbtn btn btn-w-m btn-default">C型左半</button>
                    <button style="top: calc(100px - 30px - 50px);left:calc(75% - 60px);" type="button" class="processbtn btn btn-w-m btn-default">C型右半</button>
                    <button style="top: calc(200px - 30px - 50px);left:calc(12.5% - 60px);" type="button" class="processbtn btn btn-w-m btn-primary">主承力框L</button>
                    <button style="top: calc(200px - 30px - 50px);left:calc(37.5% - 60px);" type="button" class="processbtn btn btn-w-m btn-default">移动外罩L</button>
                    <button style="top: calc(200px - 30px - 50px);left:calc(62.5% - 60px);" type="button" class="processbtn btn btn-w-m btn-primary">主承力框R</button>
                    <button style="top: calc(200px - 30px - 50px);left:calc(87.5% - 60px);" type="button" class="processbtn btn btn-w-m btn-primary">移动外罩R</button>

                    <button style="top: calc(300px - 30px);left:calc(0px - 60px);" type="button" class="processbtn btn btn-w-m btn-white">扭矩盒L</button>
                    <button style="top: calc(300px - 30px);left:calc(12.5% - 60px);" type="button" class="processbtn btn btn-w-m btn-white">下导轨梁L</button>
                    <button style="top: calc(300px - 30px);left:calc(25% - 60px);" type="button" class="processbtn btn btn-w-m btn-white">外涵内层L</button>
                    <button style="top: calc(300px - 30px);left:calc(37.5% - 60px);" type="button" class="processbtn btn btn-w-m btn-danger">承力框</button>
                    <button style="top: calc(300px - 30px);left:calc(50% - 60px);" type="button" class="processbtn btn btn-w-m btn-white">扭矩盒R</button>
                    <button style="top: calc(300px - 30px);left:calc(62.5% - 60px);" type="button" class="processbtn btn btn-w-m btn-white">下导轨梁R</button>
                    <button style="top: calc(300px - 30px);left:calc(75% - 60px);" type="button" class="processbtn btn btn-w-m btn-white">外涵内层R</button>
                    <button style="top: calc(300px - 30px);left:calc(87.5% - 60px);" type="button" class="processbtn btn btn-w-m btn-white">承力框</button>
                </div>

            </div>
        </div>

    </div>
    <th:block th:include="include :: footer" />
<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
<script th:src="@{/js/jquery.contextMenu.min.js}"></script>
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=4.7.2}"></script>
<script th:src="@{/ruoyi/js/common.js?v=4.7.2}"></script>
<script th:src="@{/ruoyi/index.js?v=20201208}"></script>
<script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
<script th:inline="javascript">
    var ctx = [[@{/}]];
    function Goto_systemhomepage() {
        window.location = ctx +'generalControl/SystemHomePage';
    }
    function Goto_mainconsole() {
        window.location = ctx +'generalControl/MainConsole';
    }
</script>
</body>
</html>
